<template>
    <span class="product-counter">
        <span class="minus icon" :class="{disabled: count === min}" @click.stop="onClickMinus">&#xe7de;</span>
        <input class="input" v-model="count" type="tel" />
        <span class="plus icon" :class="{disabled: count === max}" @click.stop="onClickPlus">&#xe848;</span>
    </span>
</template>

<script>
export default {
    props: {
        value: {
            type: Number,
            default: 1,
        },
        max: {
            type: Number,
            default: -1,
        },
        min: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            count: this.value,
        };
    },
    watch: {
        '$props.value'(val) {
            if (Number(this.count) !== Number(val)) {
                this.count = val;
            }
        },
        count(newVal, oldVal) {
            // 比最小的要小
            if (newVal < this.min) {
                this.count = this.min;
                wx.showToast({
                    title: '库存不足',
                    icon: 'none',
                    // title: '最少购买' + this.min + '件',
                });
                if (oldVal !== this.min) {
                    this.$emit('input', this.count);
                }
            } else if (newVal > this.max && this.max !== -1) {
                // 比最多的要多
                this.count = this.max;
                wx.showToast({
                    title: '最多购买' + this.max + '件',
                    icon: 'none',
                });
                if (oldVal !== this.max) {
                    this.$emit('input', this.count);
                }
            } else {
                this.count = newVal;
                this.$emit('input', newVal);
            }
        },
    },
    methods: {
        onClickMinus() {
            const count = this.count - 1;
            if (count >= this.min) {
                this.count = count;
                this.$emit('input', count);
            } else {
                this.$emit('overflow-minus');
            }
        },
        onClickPlus() {
            const count = this.count + 1;
            if (count <= this.max || this.max === -1) {
                this.count = count;
                this.$emit('input', count);
            } else {
                this.$emit('overflow-plus');
            }
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.product-counter {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    .input {
        display: inline-block;
        width: 100rpx;
        height: 48rpx;
        min-height: 48rpx;
        padding: 0;
        font-size: 28rpx;
        line-height: 48rpx;
        border-top: 1px solid rgb(216,220,230);
        border-bottom: 1px solid rgb(216,220,230);
        text-align: center;
        vertical-align: middle;
    }
    .plus,
    .minus {
        display: inline-block;
        width: 48rpx;
        height: 48rpx;
        font-size: 28rpx;
        line-height: 48rpx;
        background-color: rgb(245,247,250);
        border: 1px solid rgb(216,220,230);
        text-align: center;
        vertical-align: middle;
        &.disabled {
            color: @fourth-font-color;
        }
    }
    .minus {
        border-radius: 4rpx 0 0 4rpx;
    }
    .plus {
        border-radius: 0 4rpx 4rpx 0;
    }
}
</style>
